<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<!-- the5fire的技术博客实例 -->
	<title>index_demo4</title>
	<script src="js/jquery.js"></script>
	<script src="js/underscore.js"></script>
	<script src="js/backbone.js"></script>
</head>
<body>
	<script type="text/javascript">

	// (function ($) {
	// 	Book = Backbone.Model.extend({

	// 		defaults : {    // 感谢网友蓝色动力指正改为defaults

	// 		title:'default'

	// 	},

	// 		initialize: function(){

	// 		//alert('Hey, you create me!');

	// 	}

	// 	});

	// 	BookShelf = Backbone.Collection.extend({

	// 		model : Book

	// 	});

	// 	var book1 = new Book({title : 'book1'});

	// 	var book2 = new Book({title : 'book2'});

	// 	var book3 = new Book({title : 'book3'});

	// 	//var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add

	// 	var bookShelf = new BookShelf;

	// 	bookShelf.add(book1);

	// 	bookShelf.add(book2);

	// 	bookShelf.add(book3);

	// 	bookShelf.remove(book3);

	// 	//基于underscore这个js库，还可以使用each的方法获取collection中的数据

	// 	// bookShelf.each(function(book){

	// 	// 	alert(book.get('title'));

	// 	// });
	// 	Backbone.sync = function(method, model) {
	// 	  alert(method + ": " + model.url);
	// 	};

	// 	var accounts = new Backbone.Collection;
	// 	accounts.url = '/accounts';
	// 	// 从服务器拉取集合
	// 	accounts.fetch();
	// 	// bookShelf.fetch({url:'/getbooks/',success:function(collection,response){

	// 	// 	collection.each(function(book){

	// 	// 	alert(book.get('title'));

	// 	// 	});

	// 	// 	},error:function(){

	// 	// 	alert('error');

	// 	// }});







	// })(jQuery);

(function ($) {
    //collection是一个简单的models的有序集合
    //1、一个简单的例子

    Book = Backbone.Model.extend({
        defaults : {    // 感谢网友蓝色动力指正改为defaults
            title:'default'
        },
        initialize: function(){
            //alert('Hey, you create me!');
        }
    });
    BookShelf = Backbone.Collection.extend({
        model : Book
    });

    var book1 = new Book({title : 'book1'});
    var book2 = new Book({title : 'book2'});
    var book3 = new Book({title : 'book3'});

    //var bookShelf = new BookShelf([book1, book2, book3]); //注意这里面是数组,或者使用add
    var bookShelf = new BookShelf;
    bookShelf.add(book1);
    bookShelf.add(book2);
    bookShelf.add(book3);
    bookShelf.remove(book3);
    /*
    for(var i=0; i<bookShelf.models.length; i++) {
        alert(bookShelf.models[i].get('title'));
    }
    */
    //基于underscore这个js库，还可以使用each的方法获取collection中的数据
    bookShelf.each(function(book){
        alert(book.get('title'));
    });

    //2、使用fetch从服务器端获取数据,使用reset渲染
    bookShelf.bind('reset', showAllBooks);
    bookShelf.fetch({url:'/getbooks/',success:function(collection,response){
        collection.each(function(book){
            alert(book.get('title'));
        });
    },error:function(){
        alert('error');
    }});
    showAllBooks = function(){
        bookShelf.each(function(book){
            ​//将book数据渲染到页面。
        });
    }
    //上述代码仅仅均为可正常执行的代码，不过关于服务器端的实例在后面会有。
})(jQuery);


	</script>
</body>
</html>